import React, {Component} from 'react';
import {Grid,Dialog, Button,Step,Input,Icon} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
const { Item: StepItem } = Step;
const { Group: ButtonGroup } = Button;

/**
*  修改密码
*/
export default class BaseModifyPwd extends Component{
  constructor(props) {
     super(props);
     this.state = {
       visible: false,
       currentStep: 0,
       modifyState:false,
       user:{}
     }
  }

  //打开弹出层
  onOpen = () => {
    this.setState({
      visible: true,
      currentStep: 0,
      modifyState:false,
      user:{}
    });
  };
  //关闭弹出层
  onClose = () => {
    this.setState({
      visible: false
    });
  };

  verifyPwd(rule, value, callback){
    var errors = [];
    const pwd = this.state.user.password;
    if (pwd != undefined && pwd !='') {
      var res = API.verifyPwd({password:this.state.user.password});
      if (res.code != "000" ) {
        errors.push('密码错误');
      } else {
      }
    }else {
       errors.push('必填');
    }
    callback(errors);
  }

  validateVpwdForm = () => {
    this.refs.verifyPwdForm.validateAll((errors, values) => {
      console.log('errors', errors, 'values', values);
      if(errors == null){
        const s = this.state.currentStep + 1;
        this.setState({
          currentStep: s > 2 ? 2 : s
        });
      }
    });
  };

  verifyRePwd(rule, value, callback){
    var errors = [];
    const newPwd1 = this.state.user.newPwd1;
    const newPwd2 = this.state.user.newPwd2;
    if (newPwd1 != newPwd2) {
       errors.push('密码不一样');
    }
    callback(errors);
  }

  updatePwd = ()=>{
    this.refs.verifyPwdForm.validateAll((errors, values) => {
      console.log('errors', errors, 'values', values);
      if(errors == null){
        //修改密码
        const {user} = this.state;
        const res = API.modifyPwd({oldPwd:user.password,newPwd:user.newPwd1})
        // console.log(res);
        const s = this.state.currentStep + 1;
        this.setState({
          currentStep: s > 2 ? 2 : s,
          modifyState: res.code=='000'?true:false
        });
      }
    });
  }

  /**
  *  退出
  */
  logOut = ()=>{
    API.getUserLogout().then((value) => {
      window.location.href = "#/login"
    }).catch((err) => {
      Toast.err("系统异常！");
    })
  }

  render(){
    const {currentStep} = this.state;
    return(
      <div>
          <a href="javaScript:;" onClick={this.onOpen}>修改</a>
          {/* 弹出层 */}
          <Dialog
            visible={this.state.visible}
            footer={false}
            onClose={this.onClose}
            title="修改密码"
            className="add-user-dialog"
            style={{
              textAlign:'center',
            }}
          >
              <Step current={currentStep} type="dot" style={{marginTop:20}} readOnly={true}>
                <StepItem title="输入密码" icon={currentStep > 0?"success-filling":""}/>
                <StepItem title="密码确认" icon={currentStep > 1?"success-filling":""}/>
                <StepItem title="完成" icon="success-filling"/>
              </Step>
              <br />
              <br />
            {
              currentStep === 0?
              <div>
                {/* 第一步 */}
                <IceFormBinderWrapper ref="verifyPwdForm" value={this.state}>
                  <div>
                    <div>
                      <span>旧密码：</span>
                    <IceFormBinder rules={[
                        {
                          validator: this.verifyPwd.bind(this)
                        }
                      ]} name="user.password" ><Input htmlType="password" /></IceFormBinder>
                    </div>
                    <div><IceFormError name="user.password" /></div>
                  </div>
                </IceFormBinderWrapper>
                <Button  onClick={this.validateVpwdForm} style={{
                    marginTop:30
                  }} type="primary" > 下一步 </Button>
              </div>
              :null
            }
            {
              currentStep ===1 ?
                <div>
                  {/* 第二步 */}
                  <IceFormBinderWrapper ref="verifyPwdForm" value={this.state}>
                    <div>
                      <div>
                        <span>新密码：</span>
                      <IceFormBinder required={true} min={6} message="必填，密码至少6位数" name="user.newPwd1" ><Input htmlType="password" /></IceFormBinder>
                      </div>
                      <div><IceFormError name="user.newPwd1" /></div>
                      <div style={{
                        marginRight: 13,
                        marginTop: 10,
                      }}>
                        <span>重复密码：</span>
                        <IceFormBinder rules={[
                          {
                            type: 'string',
                            required: true,
                            message: '必填',
                          },{
                            type: 'string',
                            min: 6,
                            message: '密码至少6位数',
                          },{
                            validator: this.verifyRePwd.bind(this)
                          }
                        ]} name="user.newPwd2" ><Input htmlType="password" /></IceFormBinder>
                      </div>
                      <div><IceFormError name="user.newPwd2" /></div>
                    </div>
                  </IceFormBinderWrapper>
                  <Button onClick={this.updatePwd} type="primary" style={{
                      marginTop:30
                    }} > 完成 </Button>
                </div>
              : null
            }

            {
              currentStep ===2 ?
                <div>
                  {/* 修改密码完成 */}
                  {
                    this.state.modifyState?
                      <Row wrap={true} justify='center' style={{
                          marginBottom:30
                        }}>
                        <Col span='24'>
                          <Icon type="success-filling" size={"xxl"} style={{color:"#1ecb9b"}} />
                          <div className="modifyPwd-success"> 密码修改成功 </div>
                        </Col>
                        <Col span='24' style={{margin:'10px 0'}}>
                          <span>密码修改成功，下次登录时请用新密码登录！</span>
                        </Col>
                        <Col span='24'>
                          <Button onClick={this.logOut} type="primary" style={{margin:'10px 10px'}}> 重新登录 </Button>
                          <Button onClick={this.onClose}  style={{margin:'10px 10px'}}> 关闭 </Button>
                        </Col>
                      </Row>
                    :
                      <Row  wrap={true} justify='center' style={{
                          marginBottom:30
                        }}>
                          <Col span='24'>

                            <Icon type="delete-filling" size={"xxl"} style={{color:"#fc6f6d"}} />
                            <div className="modifyPwd-success"> 密码修改失败 </div>
                          </Col>
                          <Col span='24' style={{margin:'10px 0'}}>
                            <span>密码修改失败，请重新尝试</span>
                          </Col>
                          <Col span='24'>
                            <Button onClick={()=>{
                              this.setState({
                                currentStep: 0
                              });
                              }} type="primary" style={{margin:'10px 10px'}}> 返回 </Button>
                            <Button onClick={this.onClose}  style={{margin:'10px 10px'}}> 关闭 </Button>
                          </Col>
                      </Row>
                  }
                </div>
              : null
            }

         </Dialog>
      </div>
    )
  }
}
